<template>
  <view style="position: relative">
    <text class="title">领食周边购&nbsp;|&nbsp;{{ countData?.city || '定位中' }}</text>
    <image style="width: 750rpx;height: 1120rpx;margin-top: -2px"
           :src="BaseImgUrl + '/once/lstz/ldtzbg_01.png'"></image>
    <view style="position: absolute;top:718rpx;">
      <view style="margin: 0 118rpx;border-radius: 20rpx;margin-bottom:20rpx;overflow: hidden">
        <u-notice-bar icon="" bgColor="#FFBB55AA" direction="column" duration="3000" :disableTouch="true"
                      color="#000" fontSize="24rpx" :text="successList"></u-notice-bar>
      </view>
      <view class="data_count">
        <image class="data_bg" :src="BaseImgUrl + '/once/date_bg.png'"></image>
        <view class="data_content">
          <view class="data_text">
            <view style="height: 20rpx"></view>
            <view>
              <up-count-to :startVal="1" :endVal="countData?.total_money" color="#FFFFFF" fontSize="32rpx"
                           separator=","></up-count-to>
              元
            </view>
            <view>累积发放奖金</view>
          </view>
          <view class="data_text">
            <view style="height: 20rpx"></view>
            <view>
              <up-count-to :startVal="1" :endVal="countData?.total_people" color="#FFFFFF" fontSize="32rpx"
                           separator=","></up-count-to>
              人
            </view>
            <view>累计挑战人数</view>
          </view>
        </view>
      </view>

      <view class="tzing">
        <image v-if="userJoinChallenge.length>0" class="tzing_bg" :src="BaseImgUrl + '/once/lstz/tzing.png'"></image>
        <image v-else class="tzing_bg1" :src="BaseImgUrl + '/once/lstz/jxtzbt.png'"></image>
      </view>
      <view :style="{marginTop:userJoinChallenge.length>0?'66rpx':'76rpx'}">
        <image v-if="userJoinChallenge.length>0"
               style="width: 750rpx;height:100%;margin-top: -300rpx;z-index:-1;position: absolute;"
               :src="BaseImgUrl + '/once/lstz/ldtzbg_02.png'"></image>
        <!-- 任务挑战中列表 -->
        <view v-if="userJoinChallenge.length>0" v-for="(item,index) in userJoinChallenge" :key="index"
              style="z-index: 100;">
          <join_content :isLast="userJoinChallenge.length-1===index" :item="item"
                        @giveUpTask="giveUpTask(item)"
                        :city="{'city':countData?.city,'reseller_id':countData?.reseller_id}"></join_content>
        </view>

        <!-- 惊喜挑战 奖金补贴 列表 -->
        <view class="jxtzbt_conten" v-if="userJoinChallenge.length>0">
          <image class="jxtzbt_bg0" :src="BaseImgUrl + '/once/lstz/ldtzbg_03.png'"></image>
          <image class="jxtzbt_bg1" :src="BaseImgUrl + '/once/lstz/jxtzbt.png'"></image>
        </view>
        <view style="width: 750rpx;position: relative;margin-top: -20rpx">
          <image style="width: 750rpx;height: 100%;z-index:-1;position: absolute;"
                 :src="BaseImgUrl + '/once/lstz/ldtzbg_02.png'" v-if="challengeList.length !== 0"></image>
          <view
              style="position: relative;color: #666666;font-size: 28rpx;background-color: white;border-radius: 6rpx;margin: 0 70rpx;padding: 5rpx;text-align: center"
              v-if="challengeList.length === 0">
            当前站点暂无活动
          </view>
          <view v-for="(item,index) in challengeList" :key="index" style="z-index: 100;position: relative;">
            <view class="item_content">
              <view style="display: flex;align-items: baseline">
                <text class="bm_end_time">报名截止时间：{{ item.end_time }}</text>
                <view style="flex: 1"></view>
                <image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>
                <text class="join_count">{{ item.join_count || 0 }}人已参与</text>
              </view>
              <view class="money_bg_content">
                <view style="position: relative">
                  <image class="money_bg"
                         :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
                  <view class="money_text">
                    <text>{{ item.money }}</text>
                    <text style="font-size: 32rpx">元</text>
                  </view>
                </view>
                <view style="width: 20rpx"></view>
                <view style="margin-top: 10rpx;width: 100%">
                  <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold">{{ item.title }}</view>
                  <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">
                    {{ item.descript + "" }} &nbsp;
                  </view>
                  <view style="display: flex;margin-top: 10rpx">
                    <view style="flex: 1"></view>
                    <view :class="getTime(item?.apply_start_time, item?.apply_end_time) ? 'go_buy':'go_buy1'"
                          @click="getTime(item?.apply_start_time, item?.apply_end_time)?fire_join(item):showTip('当前时间段不可报名')"
                          v-if="item?.sub_type === 1 && item.apply_start_time !== null && item.apply_start_time !== 'null'">
                      {{
                        item.sub_type === 1 ? (getTime(item?.apply_start_time, item?.apply_end_time) ? '免费报名' : '报名时间 ' + item?.apply_start_time + ' ~ ' + item?.apply_end_time) : '免费报名'
                      }}
                    </view>
                    <view class="go_buy" @click="fire_join(item)" v-else>
                      免费报名
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view style="height: 28rpx" v-if="index !== challengeList.length-1"></view>
          </view>
        </view>
        <!-- 加码福利送不停 -->
        <!--        <image style="width: 750rpx;height: 268rpx" :src="BaseImgUrl + '/once/lstz/ldtzbg_05.png'"></image>-->
        <!--        <view style="width: 750rpx;position: relative;margin-top: -20rpx;overflow: hidden">-->
        <!--          <image style="width: 750rpx;height: 100%;z-index:-1;position: absolute;"-->
        <!--                 :src="BaseImgUrl + '/once/lstz/ldtzbg_06.png'"></image>-->
        <!--          <view v-for="(item,index) in data2" :key="index" style="z-index: 100;position: relative;">-->
        <!--            <view class="item_content">-->
        <!--              <view style="display: flex;align-items: baseline">-->
        <!--                <text class="bm_end_time">报名截止时间:2024.04.15 18:36</text>-->
        <!--                <view style="flex: 1"></view>-->
        <!--                <image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>-->
        <!--                <text class="join_count">39625人已参与</text>-->
        <!--              </view>-->
        <!--              <view class="money_bg_content">-->
        <!--                <view style="position: relative">-->
        <!--                  <image class="money_bg"-->
        <!--                         :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>-->
        <!--                  <view class="money_text">-->
        <!--                    <text>15</text>-->
        <!--                    <text style="font-size: 32rpx">元</text>-->
        <!--                  </view>-->
        <!--                </view>-->
        <!--                <view style="width: 20rpx"></view>-->
        <!--                <view style="margin-top: 10rpx;width: 100%">-->
        <!--                  <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold">惊喜7天打卡挑战</view>-->
        <!--                  <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">-->
        <!--                    惊喜7天打卡挑战-->
        <!--                  </view>-->
        <!--                  <view style="display: flex">-->
        <!--                    <view style="flex: 1"></view>-->
        <!--                    <view class="go_buy" style="margin-top: 10rpx">-->
        <!--                      去完成-->
        <!--                    </view>-->
        <!--                  </view>-->
        <!--                </view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--            <view style="height: 28rpx" v-if="index !== data2.length-1"></view>-->
        <!--            <view style="height: 10rpx" v-else></view>-->
        <!--          </view>-->
        <!--        </view>-->
        <image style="width: 750rpx;height: 130rpx" :src="BaseImgUrl + '/once/lstz/ldtzbg_07.png'"></image>
        <view style="min-height: 100rpx;background-color: white">
        </view>
        <u-safe-bottom></u-safe-bottom>
      </view>
    </view>
  </view>

  <view class="bottom">
    <view style="display: flex;align-items: center;">
      <view style="font-size: 26rpx;width: 100rpx;text-align: center" @click="back(true,'/pages/index/index')">
        <image style="width: 48rpx;height: 48rpx" :src="BaseImgUrl + '/once/lstz/index.png'"></image>
        <view>首页</view>
      </view>
      <view style="flex: 1"></view>
      <image style="width: 328rpx;height: 136rpx;margin-top: -25rpx"
             :src="BaseImgUrl + '/once/lstz/qshqty.gif'" @click="back(false,'/pages/makemoney/getmaker')"></image>
      <view class="join_qu" @click="back(false,'/pages/share/vipgroup')">
        进群领专享福利
      </view>
    </view>
    <u-safe-bottom></u-safe-bottom>
  </view>
  <view
      style="position: fixed;z-index: 199;right: -2px;bottom: 68%;;border-radius: 13rpx; box-shadow: -1px -0 2px 2px rgba(0, 0, 0, 0.05);"
      @click="lsgz">
    <image style="width: 38rpx;height: 80rpx"
           :src="BaseImgUrl + '/once/lstz/rule.png'"></image>
  </view>
  <view style="width: 128rpx;height: 128rpx;;position: fixed;z-index: 199;right: -20rpx;bottom: 38%;" @click="toMyJoin">
    <image style="width: 158rpx;height: 158rpx;;margin: -30rpx" mode="heightFix"
           :src="BaseImgUrl + '/once/lstz/my_task.png'"></image>
  </view>
  <!-- 报名弹框 -->
  <u-popup
      :show="showJoin"
      :round="10"
      mode="bottom"
      @close="showJoin = false"
      closeable
  >
    <view class="pop-root">
      <view class="money_bg_content" style="margin: 20rpx; height: 176rpx;">
        <view style="position: relative">
          <image class="money_bg"
                 :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
          <view class="money_text">
            <text>{{ currentJoinItem.money || 0 }}</text>
            <text style="font-size: 32rpx">元</text>
          </view>
        </view>
        <view style="width: 20rpx"></view>
        <view style="margin-top: 10rpx">
          <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold;margin-top: 20rpx">
            {{ currentJoinItem.title || '' }}
          </view>
          <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">
            {{ currentJoinItem.descript || '' }}
          </view>
        </view>
      </view>
      <view class="box-title-line"></view>
      <view class="join_content">
        <view class="bgTitle-box">
          <scroll-view scroll-y="true" style="height: 680rpx;">
            <view style="margin-top: 20rpx"></view>
            <view class="join_title">
              报名须知
            </view>
            <view class="activity_item">
              <text class="activity_time_title">活动开始时间
              </text>
              <text class="activity_time"> {{ currentJoinItem.start_time || '无' }}</text>
            </view>
            <view class="activity_item">
              <text class="activity_time_title">报名截止时间
              </text>
              <text class="activity_time"> {{ currentJoinItem.end_time || '无' }}</text>
            </view>
            <view class="activity_item">
              <text class="activity_time_title">任务完成时长
              </text>
              <text class="activity_time">{{ currentJoinItem.date || '无' }}天</text>
            </view>
            <view class="activity_item">
              <text class="activity_time_title">挑战奖励
              </text>
              <text class="activity_time">{{ currentJoinItem.money || '0' }}元</text>
            </view>
            <view class="box-title-line"></view>
            <view class="join_title" style="margin-top: 20rpx">
              挑战要求
            </view>
            <view class="activity_item">
              <text class="activity_time_title">指定城市可参与
              </text>
              <text class="activity_time">{{ currentJoinItem.city || '无限制' }}</text>
            </view>
            <view class="activity_item">
              <text class="activity_time_title">指定下单时段
              </text>
              <text class="activity_time">{{ currentJoinItem.task_time || '无限制' }}</text>
            </view>
            <view class="box-title-line"></view>
            <view class="join_title" style="margin-top: 20rpx;margin-bottom: 20rpx;color: #F9692A;font-weight: normal">
              注意事项：
            </view>
            <u-parse :content="currentJoinItem.notice"></u-parse>
            <view style="height: 60rpx">
            </view>
          </scroll-view>

        </view>
      </view>
      <view class="bottom_content">
        <view class="protocol">
          <view class="dianji" @tap="check_icon()">
            <image v-if="check_on === 0" class="check_icon"
                   :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
            <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
          </view>
          <view style="color: #1f2f34">
            我已阅读并同意《
            <text @click.stop="lsgz" style="color: #00b1ff">领食周边购挑战赛规则</text>
            》
          </view>
        </view>
        <view class="immediately" @click="immediately">
          立即报名
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
// #ifdef H5
import {BaseImgUrl} from "../utils/lshttp";
import {ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import Join_content from "./join_content.vue";
import wx from 'weixin-js-sdk'
import * as uniWebView from "@dcloudio/uni-webview-js";
import {challengeAPI, challengeNumAPI, joinChallengePI, userJoinChallengeAPI} from "../services/lstz";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {getTime} from "../utils/date";
import {showTip} from "../utils/conUtils";
// #endif

const userInfoStore = useUserInfoStore()
const showJoin = ref(false)
const city = ref()
const optionsData = ref()
const webviewStyles = ref({
  progress: {
    color: '#FF3333'
  }
})

onLoad((options) => {
  city.value = options.city
  optionsData.value = options
  if (options?.userId) {
    userInfoStore.setUserId(options.userId)
  } else {
    if (userInfoStore.isLogin()) {
      userInfoStore.setUserId(userInfoStore.userInfo.id)
    }
  }
  getChallengeNumAPI()
})
onShow(() => {
  if (userInfoStore.userId) {
    getChallengeAPI(userInfoStore.userId)
    getUserJoinChallengeAPI(userInfoStore.userId)
  }
})
const back = (iaTab, path) => {
  // #ifdef H5
  let siToPAge = false
  uniWebView.webView.getEnv(function (res) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境1" + JSON.stringify(res), icon: "none"})
    if (res.plus) {
      if (iaTab) {
        uniWebView.webView.switchTab({
          url: path
        })
      } else {
        uniWebView.webView.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  wx.miniProgram.getEnv(function (env) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境2" + JSON.stringify(res), icon: "none"})
    if (env['miniprogram'] == true) {
      if (iaTab) {
        wx.miniProgram.switchTab({
          url: path
        })
      } else {
        wx.miniProgram.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  if (siToPAge === false) {
    if (iaTab) {
      uni.switchTab({
        url: path
      })
    } else {
      uni.navigateTo({
        url: path
      });
    }
  }
  // #endif
}
const challengeList = ref([])
const getChallengeAPI = async () => {
  const res = await challengeAPI(city.value, userInfoStore.userId)
  challengeList.value = res.result
}
const userJoinChallenge = ref([])
const getUserJoinChallengeAPI = async () => {
  const res = await userJoinChallengeAPI(1, 1, 10, userInfoStore?.userId)
  userJoinChallenge.value = res.result
}

const giveUpTask = (remItem) => {
  userJoinChallenge.value = userJoinChallenge.value.filter(item => item !== remItem);
}

const currentJoinItem = ref({})
const fire_join = (item) => {
  showJoin.value = true
  currentJoinItem.value = item
}

const countData = ref({})
const successList = ref([])
const getChallengeNumAPI = async () => {
  const res = await challengeNumAPI(userInfoStore.userId, city.value)
  countData.value = res.result
  countData.value?.list.forEach((item) => {
    successList.value.push(item.message)
  })
}

const check_on = ref(0)
const check_icon = () => {
  if (check_on.value === 1) {
    check_on.value = 0
  } else {
    check_on.value = 1
  }
}

// 点击挑战规则
const lsgz = () => {
  uni.navigateTo({url: "challengeRule?type=3"})
}

// 点击立即报名
const immediately = async () => {
  if (check_on.value === 0) {
    await uni.showToast({title: "请认真阅读并同意挑战规则", icon: "none"})
    return
  }
  showJoin.value = false
  await joinChallengePI(currentJoinItem.value.id, userInfoStore.userId)
  await uni.showToast({title: '报名成功', icon: "none", duration: 3000})
  await getUserJoinChallengeAPI()
}
const toMyJoin = () => {
  uni.navigateTo({url: "my_join?reseller_id=" + countData.value?.reseller_id})
}

// const data1 = ref([
//   {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }, {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }, {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }
// ])
</script>

<style>
page {
  background-color: white;
}
</style>
<style scoped lang="scss">
.data_count {
  width: 564rpx;
  margin-left: 93rpx;
  height: 146rpx;
  position: relative;

  .data_bg {
    width: 564rpx;
    height: 146rpx;;
    position: absolute;
    z-index: 2
  }

  .data_content {
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .data_text {
      z-index: 100;
      position: relative;
      width: 100%;
      height: 88rpx;
      line-height: 48rpx;
      color: white;
      font-size: 32rpx
    }
  }
}

.tzing {
  width: 564rpx;
  margin-left: 93rpx;
  height: 56rpx;
  margin-top: 6rpx;
  position: relative;

  .tzing_bg {
    width: 564rpx;
    height: 56rpx;
    z-index: 2;
    bottom: 0;
  }

  .tzing_bg1 {
    width: 388rpx;
    height: 48rpx;
    margin-top: 6rpx;
    margin-left: 88rpx;
    z-index: 2;
    bottom: 0;
  }
}

.item_content {
  z-index: 100;
  margin: 0 50rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;

  .bm_end_time {
    font-size: 26rpx;
    color: #3D3D3D;
  }

  .join_count {
    font-size: 24rpx;
    color: #888888;
  }

  .fire {
    width: 31rpx;
    height: 27rpx;
  }
}

.money_bg_content {
  margin-top: 20rpx;
  position: relative;
  display: flex;

  .money_bg {
    width: 140rpx;
    height: 176rpx;
    position: absolute;
    z-index: 1;
  }

  .money_text {
    color: #ff5c14;
    font-weight: bold;
    font-size: 56rpx;
    z-index: 100;
    position: relative;
    width: 140rpx;
    text-align: center;
    line-height: 120rpx;
  }
}

.fq_tz {
  width: 160rpx;
  height: 64rpx;
  background: #FFFFFF;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  border: 2rpx solid #E5E5E5;
  text-align: center;
  line-height: 64rpx;
  color: #888888;
  font-size: 26rpx
}

.go_buy {
  height: 58rpx;
  padding: 0 16rpx;
  background: linear-gradient(270deg, #FC754A 0%, #FDBA37 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 24rpx
}

.go_buy1 {
  height: 58rpx;
  padding: 0 18rpx;
  background: linear-gradient(270deg, #dee9ea 0%, #d9d9e6 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #3D3D3D;
  font-size: 24rpx
}

.jxtzbt_conten {
  width: 750rpx;
  height: 268rpx;
  position: relative;

  .jxtzbt_bg0 {
    width: 750rpx;
    height: 268rpx;
    position: absolute;
  }

  .jxtzbt_bg1 {
    width: 468rpx;
    height: 76rpx;
    left: 144rpx;
    margin-top: 84rpx;
    z-index: 100;
    position: relative;
  }

}

.bottom {
  padding: 10rpx 20rpx 0 20rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 199;
  background-color: white;

  .join_qu {
    width: 280rpx;
    height: 90rpx;
    background: linear-gradient(64deg, #FC754A 0%, #FEBC5B 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    color: white;
    font-weight: bold;
    font-size: 28rpx;
    text-align: center;
    line-height: 90rpx
  }
}

.box-title-line {
  height: 2rpx;
  background-color: #F1F1F1;
}

.join_content {
  margin: 0 20rpx;
}

.immediately {
  font-weight: 400;
  font-size: 32rpx;
  color: #FFFFFF;
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  letter-spacing: 10rpx;
  text-align: center;
  background: linear-gradient(270deg, #FC754A 0%, #FEBC5B 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}

.activity_time_title {
  font-weight: 400;
  font-size: 28rpx;
  color: #888888;
  line-height: 64rpx;
}

.activity_time {
  font-weight: 400;
  font-size: 28rpx;
  color: #3D3D3D;
  line-height: 64rpx;
}

.activity_item {
  display: flex;
  justify-content: space-between;
}

.join_title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  line-height: 28rpx;;
  margin-bottom: 10rpx;
}


.protocol {
  color: #999;
  display: flex;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.check_icon {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;

  image {
    border-radius: 100rpx;
  }
}

.bottom_content {
  box-shadow: -3rpx -3px 2px 1px rgba(66, 66, 66, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.title {
  z-index: 1;
  position: absolute;
  top: 58rpx;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 26rpx;
}
</style>
